<template>
	<view class="content">
		<skeleton selector="skeleton" v-if="showSkeleton" :bgcolor="bgcolor"></skeleton>
		<view class="avatar skeleton-radius">
			<image src="/static/poster/avatar.png" mode="aspectFill"></image>
		</view>
		<view class="p skeleton-radius">设置类 skeleton-radius 圆角骨架</view>
		<view class="p skeleton-rect">设置类 skeleton-radius 方块骨架</view>
		<view class="ul">
			<view class="li skeleton-rect"><image src="/static/lottery/tips-bg.png" mode="aspectFill"></image></view>
			<view class="li skeleton-rect"><image src="/static/lottery/tips-bg.png" mode="aspectFill"></image></view>
		</view>
		<view class="tips skeleton-rect">注意：使用骨架屏 需要将页面的内容 填充起来 </view>
		<view class="color">
			<view class="l skeleton-rect">自定义背景颜色:(当前透明)</view>
			<view class="r">
				<view v-for="(item,index) in colorList"  :key="index" @click="colorIndex = index; bgcolor = item" :style="{ background: item }" :class="['skeleton-rect', {'active': index == colorIndex}]"></view>
			</view>
		</view>
		<button class="btn" :disabled="isBtn" size="mini" type="primary" @click="show">{{ btnTitle }}</button>
	</view>
</template>

<script>
	import skeleton from '@/components/skeleton.vue'
	export default {
		components:{ skeleton },
		data(){
			return {
				bgcolor:'#fff0',
				showSkeleton:false,
				btnTitle:'显示骨架屏',
				isBtn:false,
				colorList:['#ffffff','#ff7171','#2196f3','#00bcd4'],
				colorIndex:-1
			}
		},
		watch:{
			showSkeleton(v){
				if(v){
					this.$nextTick(() => {
						setTimeout(()=>{
							this.showSkeleton = false
						},2000)
					})
					
				}
			}
		},
		methods:{
			show(){
				this.showSkeleton = true
				this.countdown()
			},
			//倒计时
			countdown(){
				let time = 1;
				this.btnTitle='2s'
				this.isBtn = true
				let timer = setInterval(() => {
					if (time == 0) {
					  clearInterval(timer);
					  this.btnTitle = "显示骨架屏";
					  this.isBtn = false
					} else {
					  // 倒计时
					  this.btnTitle = time  + "s";
					  time--;
					}
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{padding: 25rpx 25rpx 0;height: calc(100vh - 88rpx);background-color: #f9f9f9;
		.avatar{width: 160rpx;height: 160rpx;margin: 0 auto 20rpx;background: #eee;border-radius: 50%;overflow: hidden;}
		.p{height: 60rpx;line-height: 60rpx;text-align: center;color: #666;font-size: 32rpx;width: 70%;margin: 0 auto 25rpx;}
		.ul{display: flex;justify-content: space-between;margin-bottom: 20rpx;
			.li{flex: none;width: 49%;height: 172rpx;background: #ddd;border-radius: 16rpx;overflow: hidden;opacity: .6;}
		}
		.color{display: flex;font-size: 32rpx;color: #666;margin-bottom: 25rpx;align-items: flex-start;
			.l{flex: none;margin-right: 20rpx;}
			.r{flex: 1;display: flex;flex-wrap: wrap;
				&>view{width: 44rpx;height: 44rpx;margin-right: 20rpx;border-radius: 4rpx;opacity: .5;
					&.active{opacity: 1;box-shadow: 0 0 3px 0px #0000007a;}
				}
			}
		}
		.tips{height: 60rpx;line-height: 60rpx;color: red;margin: 0 auto 25rpx;text-align: center;opacity: .8;}
		.btn{display: block;}
	}
</style>
